<template>
	<div>
		<div class="login_form">
			<p><span>会员登录</span></p>
			<form name="loginForm" ref="loginFor">
				<div class="msg-error" :class="{ errShow: iserror }">
					<span>{{ errormsg }}</span>
				</div>
				<div class="item">
					<label class="phone"></label>
					<input type="tel" id="phone" v-model="loginForm.username" placeholder="手机号" required="required" />
				</div>
				<div class="item">
					<label class="pwd"></label>
					<input type="password" id="pwd" v-model="loginForm.password" placeholder="密码" required="required" />
				</div>
				<div class="item">
					<label class="yz"></label>
					<input type="text" id="yz" v-model="yz" style="outline: none" placeholder="验证码" required="required" class="yz" />
					<div class="code" @click="refreshCode"><identify :identifyCode="identifyCode" id="codeImg"></identify></div>
				</div>
				<div class="items">
					<input type="checkbox" v-model="loginForm.isExpert" name="isExpert" id="isExpert" />
					<label for="isExpert">专家登陆</label>
				</div>
				<div class="items">
					<input type="checkbox" v-model="remember" id="remember" />
					<label for="remember">记住密码</label>
					<a href="#">忘记密码?</a>
				</div>
				<div class="btn">
					<input type="button" id="login_btn" @click="dl(loginForm.username, loginForm.password, yz)" value="登录" />
					<router-link to="register" id="register_btn" tag="a">注册</router-link>
				</div>
			</form>
		</div>
	</div>
</template>
<script>
import identify from './identify.vue';
export default {
	name: 'myLogin',
	components: {
		identify
	},
	data() {
		return {
			fhz: [],
			istc: true,
			dat: [],
			loginForm: {
				username: '19861601056',
				password: '123456',
				isExpert: false
			},
			remember: false, //是否记住密码
			yz: '', //验证码
			iserror: false,
			errormsg: '请输入用户名和密码',
			identifyCodes: '1234567890',
			identifyCode: ''
		};
	},
	mounted() {
		this.identifyCode = '';
		this.makeCode(this.identifyCodes, 4);

		// this.yz = this.identifyCode; //验证码默认赋值
	},
	created() {
		// alert(window.sessionStorage.getItem('pwd'))
		this.dat = this.$store.state.dat;
	},
	methods: {
		makeCode(o, l) {
			for (let i = 0; i < l; i++) {
				this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
			}

			console.log(this.identifyCode);
		},
		randomNum(min, max) {
			return Math.floor(Math.random() * (max - min) + min);
		},
		refreshCode() {
			this.identifyCode = '';
			this.makeCode(this.identifyCodes, 4);

			// this.yz = this.identifyCode; //验证码默认赋值
		},

		//登录验证
		dl(u, p, y) {
			if (this.loginForm.isExpert == true) {
				let that = this;
				this.$axios
					.post('http://localhost:8080/api/Common/CheckLoginExpert', this.$qs.stringify({ phone: u, password: p }))
					.then(function(response) {
						if (response.data.expertid != null) {
							if(y == that.identifyCode){
								if (response.data.status == 1) {
									// that.$router.push({ path: "/loginZJ",query:{id:response.data.expertid}})
									that.$router.push('/loginZJ');
									localStorage.setItem('id', response.data.expertid);
								} else {
									alert('该用户已被禁用');
								}
							}else alert('验证码错误');
							
						} else alert('用户名或密码错误');
					})
					.catch(function(error) {
						console.log(error);
					});
			} else {
				var that = this;
				this.$axios.post('http://localhost:9090/api/Common/CheckLoginMember', this.$qs.stringify({ UserName: u, Password: p })).then(function(response) {

					console.log('------------------' + response.data.password);
					if (response.data == false) alert('用户名或密码错误');
					else if (y == that.identifyCode) {
						that.$router.push({ path: '/loginH' }); //query:{id:response.data.memid}
						localStorage.setItem('id', response.data.memid);
					} else alert('验证码错误');
				});
			}
		}
	}
};
</script>

<style scoped="scoped" lang="less">
	
.login_form {
	width: 300px;
	height: 300px;
	margin: 0 auto;
}
.login_form p {
	background: url('../../assets/images/right.png') no-repeat right;
	background-size: 149px 100%;
	text-align: left;
}
.login_form p span {
	display: inline-block;
	line-height: 38px;
	background: #037edb;
	padding: 1px 30px;
	margin-left: 0;
	color: #ffffff;
}
.login_form form {
	border: 1px solid #d8ebfa;
	border-top: none;
	padding: 0px 25px 10px 25px;
}
.login_form .userMessage {
	border: 1px solid #d8ebfa;
	border-top: none;
	padding: 0px 25px 10px 25px;
}
.login_form .item {
	height: 32px;
	margin-bottom: 10px;
}
.login_form .item input {
	width: 175px;
	font-size: 14px;
	line-height: 12px;
	border: 1px solid #efefef;
	padding: 10px 20px 10px 20px;
	color: #999;
}
.login_form .item input.yz {
	width: 66px;
	font-size: 14px;
	line-height: 15px;
	border: 1px solid #efefef;
	padding: 10px 131px 10px 20px;
	color: #999;
}
.login_form .item .code {
	position: relative;
	width: 105px;
	cursor: pointer;
}
#codeImg {
	position: absolute;
	right: -110px;
	top: -36px;
	width: 105px;
	height: 35px;
	border-left: 1px solid #efefef;
	cursor: pointer;
}

.login_form .items {
	font-size: 0;
	margin-bottom: 10px;
	float: left;
}
.login_form .items:nth-of-type(5),
.login_form .items:nth-of-type(4) {
	font-size: 0;
	height: 18px;
	margin-bottom: 3px;
	float: left;
}
.login_form .items label {
	font-size: 14px;
	vertical-align: middle;
	margin-right: 75px;
}
.login_form .items #remember,
.login_form .items #isExpert {
	vertical-align: middle;
	margin-right: 5px;
}
.login_form .items a {
	float: right;
	font-size: 14px;
	color: #666;
}
.login_form .btn {
	padding: 0 10px;
}
.login_form .btn a,
#login_btn {
	display: inline-block;
	width: 85px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #ffffff;
	border: 0;
	background: none;
	cursor: pointer;
}
.login_form #login_btn {
	background: #037edb;
	border-radius: 20px;
}
.login_form #register_btn {
	float: right;
	background: #27ce85;
	border-radius: 20px;
}
.login_form .msg-error {
	margin: 3px 3px 3px 3px;
	line-height: 20px;
	visibility: hidden;
	background: pink;
	border: 1px solid red;
	font-size: 12px;
	color: red;
}
.errShow {
	visibility: visible !important;
}
</style>
